<template>
    <el-dialog :close-on-click-modal="false" :visible="configFlag" class="zdy-dialog" width="700px"
               :title="$t('Network parameter')" :before-close="handleCloseDialog">
        <el-form :model="form" class="pop-form-box" :rules="rules" ref="ruleForm">
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--设备名称-->
                    <el-form-item :label="this.i18n.t('Device name')" prop="deviceName">
                        <el-input v-model="form.deviceName" :title="form.deviceName" :minlength="$rules.deviceName.min" :maxlength="$rules.deviceName.max"
                                  show-word-limit></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="MAC" prop="mac">
                        <el-input disabled="" v-model="form.mac" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="IPv4" prop="ip">
                        <el-input v-model="form.ip" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--子网掩码-->
                    <el-form-item :label="this.i18n.t('mask')" prop="networkMask">
                        <el-input v-model="form.networkMask" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--网关-->
                    <el-form-item :label="this.i18n.t('gateway')" prop="gateway">
                        <el-input v-model="form.gateway" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--首选DNS-->
                    <el-form-item :label="this.i18n.t('Preferred DNS')" prop="dnS1">
                        <el-input v-model="form.dnS1" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--备用DNS-->
                    <el-form-item :label="this.i18n.t('Alternate DNS')" prop="dnS2">
                        <el-input v-model="form.dnS2" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="footBtnBox">
                <!--取消-->
                <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
                <!--保存-->
                <el-button size="small" type="primary" :loading="saveLoading" @click="submitForm">{{this.i18n.t('save')}}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
    import { sbglNetWorkConf, sbglNetWorkGet } from '@/api/sbgl'
    export default {
        name: "config",
        props: {
            configFlag: {
                type: Boolean,
                default: false
            },
            editTableRow: {
                type: Object,
                defautl: () => {
                    return {}
                }
            }
        },
        data(){
            var validateDeviceName = (rule, value, callback) => {
                if (value == '') {
                    // 请输入设备名称
                    callback(new Error(this.i18n.t('Please enter the device name')));
                } else if (!this.$rules.deviceName.reg.test(value)) {
                    callback(new Error(this.$rules.deviceName.min+'~'+this.$rules.deviceName.max+this.i18n.t('bits')));
                } else {
                    callback();
                }
            };
            var validateMi = (rule, value, callback) => {
                if (value == ''||value==null) {
                    // 不能为空
                    callback(new Error(this.i18n.t('Cannot be empty')));
                } else if (!this.$rules.ip.test(value)) {
                    // 格式不正确
                    callback(new Error(this.i18n.t('Incorrect format')));
                } else {
                    callback();
                }
            };
          var validateDNS = (rule, value, callback) => {
            console.log(100,value);
            if (!value){
              callback();
            }else{
              if(!this.$rules.ip.test(value)) {
                // 格式不正确
                callback(new Error(this.i18n.t('Incorrect format')));
              } else {
                callback();
              }
            }

          };
            return{
                value: 0,
                saveLoading:false,
                form:{
                    deviceName: '',
                    mac: '',
                    ip: '',
                    gateway: '',
                    networkMask: '',
                    dnS1: '',
                    dnS2: ''
                },
                deviceCode: '',
                rules: {
                    deviceName: [
                        { validator: validateDeviceName,required: true, trigger: 'blur' }
                    ],
                    ip:[
                        { validator: validateMi,required: true, trigger: 'blur' }
                    ],
                    gateway:[
                        { validator: validateMi,required: true, trigger: 'blur' }
                    ],
                    networkMask:[
                        { validator: validateMi,required: true, trigger: 'blur' }
                    ],
                    dnS1:[
                        { validator: validateDNS,required: false, trigger: 'blur' }
                    ],
                    dnS2:[
                        { validator: validateDNS,required: false, trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            this.form = this.editTableRow
        },
        mounted() {
            console.log(this.$rules);
            this.sbglNetWorkGet(this.form.deviceCode)
            this.deviceCode = this.form.deviceCode
        },
        methods:{
            // 刷新列表
            parentUpdate(){
                this.deviceCode = '';
                this.$emit("update:configFlag",false);
                this.$parent.$refs.globalTable.loading_data();
            },
            // 设置网络
            sbglNetWorkConf(params, str){
              this.saveLoading=true
                sbglNetWorkConf(params, str).then((res) => {
                    if (res.code === 200) {
                        // 设置成功
                        this.W.$tips("success", this.i18n.t('Successfully set'));
                        this.parentUpdate();
                    }
                }).catch().finally(() => {
                  setTimeout(()=>{
                    this.saveLoading=false
                  },500)
                })
            },
            // 获取网络
            sbglNetWorkGet(params){
                sbglNetWorkGet(params).then((res) => {
                    console.log(109, res);
                    if (res.code === 200) {
                        this.form = res.data;
                    }
                }).catch().finally(() => {
                })
            },
            handleCloseDialog(){
                this.deviceCode = '';
                this.$emit('update:configFlag', false);
                this.$emit('update:editTableRow', null);
            },
            submitForm(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        const sendData = JSON.parse(JSON.stringify(this.form));
                        let params={
                            deviceName:sendData.deviceName,
                            mac:sendData.mac,
                            ip:sendData.ip,
                            gateway:sendData.gateway,
                            networkMask:sendData.networkMask,
                            dnS1:sendData.dnS1,
                            dnS2:sendData.dnS2
                        }
                        this.sbglNetWorkConf(params, this.deviceCode)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    }
</script>

<style scoped>
    input:disabled {
        color: #dcdcdc;
    }
</style>
